import { PageContainer } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Row,
  Col,
  Table,
  Select,
  Checkbox,
  Space,
  message,
  Popconfirm,
  Radio,
  InputNumber,
} from "antd";
import {
  useState,
  forwardRef,
  useImperativeHandle,
  useRef,
  useEffect,
} from "react";
import styles from "./styles.less";
const { TextArea } = Input;
import { namespace } from "./configFile";
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";

export default forwardRef((props, ref) => {
  const { dispatch, userNickName, venueName } = props;
  const [open, setOpen] = useState(false);
  const tableRef = useRef(null);
  const [form] = Form.useForm();
  const [titleType, setTitleType] = useState(0);

  const onChange = ({ enableStatus, id }) => {
    dispatch({
      type: `${namespace}/queryChange`,
      params: {
        enableStatus: enableStatus === 1 ? 0 : 1,
        id,
      },
    });
  };

  const onDelete = (id) => {
    dispatch({
      type: `${namespace}/queryDelete`,
      params: {
        id,
      },
    });
  };

  const submitForm = async () => {
    const params = await form.validateFields();
    delete params.venueName;
    delete params.userNickName;
    props.submitItem(params);
  };

  useImperativeHandle(ref, () => ({
    setOpen,
    form,
    setTitleType,
  }));

  return (
    <Modal
      open={open}
      title={titleType ? "编辑销售记录" : "增加销售记录"}
      forceRender
      width={600}
      onCancel={() => {
        form.resetFields();
        setOpen(false);
      }}
      footer={
        <Space>
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button type="primary" onClick={submitForm}>
            确定
          </Button>
        </Space>
      }
    >
      <Form form={form} labelCol={{ span: 5 }}>
        <Form.Item label="id" name="id" hidden>
          'id'
        </Form.Item>
        <Row gutter={8}>
          <Col span={24}>
            <Form.Item label="所属场馆" name="venueName">
              {venueName}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="员工名称" name="userNickName">
              {userNickName}
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="业绩类型"
              name="performanceType"
              rules={[{ required: true }]}
            >
              <Select placeholder="请选择">
                <Select.Option value={"1"}>课程销售</Select.Option>
                <Select.Option value={"2"}>会员卡销售</Select.Option>
                <Select.Option value={"3"}>其他</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="业绩说明"
              name="performanceIllustrate"
              rules={[{ required: true }]}
            >
              <TextArea placeholder="限20个字" maxLength={20} />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="业绩金额"
              name="performanceMoney"
              rules={[{ required: true }]}
            >
              <InputNumber
                prefix="￥"
                min={0}
                defaultValue={0}
                style={{ width: "100%" }}
              />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              label="关联会员"
              name="wechatUserTel"
              rules={[
                { required: true },
                //     {
                //     pattern: /^1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8}$/,
                //     message: '请输入正确的手机号'
                // }
              ]}
            >
              <Input placeholder="请输入会员手机号码" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="备注" name="remark" rules={[{ required: true }]}>
              <TextArea placeholder="请输入备注" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
});

// export default Dom
